<template>
  <div class="table-wrapper">
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">统计类型：</span>
        <el-radio-group v-model="page" @change="changePage">
          <el-radio :label="1">建筑面积</el-radio>
          <el-radio :label="2">用地规模</el-radio>
          <el-radio :label="3">建设规模</el-radio>
        </el-radio-group>
      </div>
    </div>
    <common-chart class="common-chart" chart-type="bar" size="big" :data="chart1" v-if="page===1"></common-chart>
    <common-chart class="common-chart" chart-type="bar" size="big" :data="chart2" v-if="page===2"></common-chart>
    <common-chart class="common-chart" chart-type="bar" size="big" :data="chart3" v-if="page===3"></common-chart>
  </div>
</template>

<script>
import CommonChart from '@/views/pages/components/CommonChart'
export default {
  name: 'CampusChart',
  data () {
    return {
      page: 1,
      title: '校园规划',
      chart1: {
        name: '',
        routeName: 'DetailInformation',
        query: { page: 'CampusPlanning', id: '42' },
        title: '已建总建筑面积',
        xAxis: [],
        series: [],
        legend: []
      },
      chart2: {
        name: '',
        routeName: 'DetailInformation',
        query: { page: 'CampusPlanning', id: '42' },
        title: '总用地规模',
        xAxis: [],
        series: [],
        legend: []
      },
      chart3: {
        name: '',
        routeName: 'DetailInformation',
        query: { page: 'CampusPlanning', id: '42' },
        title: '',
        xAxis: [],
        series: [],
        legend: []
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      if (this.page === 1) {
        this.getChart1()
      } else if (this.page === 2) {
        this.getChart2()
      } else if (this.page === 3) {
        this.getChart3()
      }
    },
    changePage () {
      const page = this.page
      this.page = null
      setTimeout(() => {
        this.page = page
        this.init()
      })
    },
    async getChart1 () {
      this.page = -1
      setTimeout(() => {
        this.page = 1
        this.chart1.title = '已建总建筑面积（万平方米）'
        this.chart1.xAxis = [
          { data: ['中关村', '良乡校区', '西山试验区'] }
        ]
        this.chart1.series = [{
          type: 'bar',
          barWidth: '50%',
          color: '#02BBFF',
          label: {
            show: true,
            position: 'top',
            textStyle: { color: '#fff', fontSize: 16, fontStyle: 'oblique' }
          },
          data: [114.34, 69.77, 5.54]
        }]
      }, 200)
    },
    async getChart2 () {
      this.page = -1
      setTimeout(() => {
        this.page = 2
        this.chart2.title = '总用地规模（亩）'
        this.chart2.xAxis = [
          { data: ['中关村', '良乡校区', '西山试验区'] }
        ]
        this.chart2.series = [{
          type: 'bar',
          barWidth: '40%',
          color: '#02BBFF',
          label: {
            show: true,
            position: 'right',
            textStyle: { color: '#fff', fontSize: 16, fontStyle: 'oblique' }
          },
          data: [1063, 1484.59, 213.34]
        }]
      }, 200)
    },
    async getChart3 () {
      this.page = -1
      setTimeout(() => {
        this.page = 3
        this.chart3.title = '建设规模统计'
        this.chart3.xAxis = [
          { data: ['十二五', '十三五', '十四五'] }
        ]
        this.chart3.legend = ['中关村校区', '良乡校区', '西山试验区']
        this.chart3.titleOption = {
          textStyle: {
            color: '#fff',
            fontSize: 22,
            fontWeight: 400,
            top: 10
          }
        }
        this.chart3.series = [{
          type: 'bar',
          barWidth: '70%',
          color: '#00E5FF',
          name: '中关村校区',
          stack: 'Search Engine',
          label: {
            show: true,
            position: 'right',
            textStyle: { color: '#fff', fontSize: 16, fontStyle: 'oblique' }
          },
          data: [56305, 257667, 415362]
        },
        {
          type: 'bar',
          barWidth: '70%',
          color: '#4AB243',
          name: '良乡校区',
          stack: 'Search Engine',
          label: {
            show: true,
            position: 'right',
            textStyle: { color: '#fff', fontSize: 16, fontStyle: 'oblique' }
          },
          data: [56305, 15000, 0]
        },
        {
          type: 'bar',
          barWidth: '70%',
          color: '#E9C026',
          name: '西山试验区',
          stack: 'Search Engine',
          label: {
            show: true,
            position: 'right',
            textStyle: { color: '#fff', fontSize: 16, fontStyle: 'oblique' }
          },
          data: [4650, 0, 17873.01]
        }]
      }, 200)
    }
  },
  components: {
    CommonChart
  }
}
</script>

<style scoped lang="scss">

</style>
